<template>
	<div class="allReport">
		<Row :gutter="16">
			<i-form :model="formItem" :label-width="150" >
				<i-col span="5">
					<Form-item label="选择校区：">
						<i-select v-model="formItem.campus" @on-change="changeCampus">
							<i-option v-for="item in campus" :value="item.campusName">{{ item.campusName }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择部门：">
						<i-select v-model="formItem.department" @on-change="changeDepartment">
							<i-option v-for="item in departments" :value="item.name">{{ item.name }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="13" style="text-align: right">
					<Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon> 导出数据</Button>
				</i-col>
			</i-form>
		</Row>
		<Row :gutter="16">
			<i-table ref="table" border :content="self" :columns="columns" :data="data"></i-table>
		</Row>
	</div>
</template>

<script>
export default {
	name: 'allReport',
	data () {
		return {
			self: this,
			formItem:{
				department:'技术部',
				campus:'屯溪路校区'
			},
			departments:this.$store.state.allDepartment,
			campus:this.$store.state.allCampus,
			columns: [
			{
				title: '部门',
				key: 'department'
			},
			{
				title: '姓名',
				key: 'name'
			},
			{
				title: '学号',
				key: 'no'
			},
			{
				title: '性别',
				key: 'sex'
			},
			{
				title: '学院',
				key: 'campus'
			},
			{
				title: '手机号',
				key: 'phone'
			},
			{
				title: '银行卡号',
				key: 'bank'
			},
			{
				title: '汇报',
				key: 'report'
			},
			{
				title: '工资',
				key: 'money',
				render: (h, params) => {
					return h('Input', {
						props:{
							value:params.row.money,
							size:'small',
							placeholder:'输入个人真实工资！'
						},
						on: {
							'on-blur': (event) => {
								if (event.target.value!=='') {
									if (event.target.value>=0) {
										this.addMoney(params.index,event.target.value);
									}else{
										this.$Message.error('输入大于0的数字');
										this.data[params.index].money=''
										event.target.value=''
									}
								}
							}
						}
					});

				}
			}
			],
			data:[
			{
				department:'技术部',
				name:'邢力',
				no:'2015213740',
				sex:'男',
				campus:'管理学院',
				phone:'15256909020',
				bank:'13211451315165',
				report:'1、值班；2、',
				money:200
			}
			]
		}
	},
	methods: {
		changeDepartment(index){
			console.log(index)
		},
		changeCampus(index){
			console.log(index)
		},
		addMoney(index,value){
			this.data[index].money=value;
		},
		exportData () {
			this.$refs.table.exportCsv({
				filename: `${this.formItem.campus}${this.formItem.department}工作汇报`,
				columns: this.columns,
				data: this.data
			});
		} 
	}
}
</script>

<style lang="css" scoped>
.allReport{
	width: 100%;
	height: 100%;
	padding-left: 20px;
	padding-right: 20px
}
</style>